//动画函数的封装
//1,getStyle函数
function getStyle(el, property) {
  if (getComputedStyle) {
    return getComputedStyle(el)[property];
  } else {
    return el.currentStyle[property];
  }
}
// 格式化样式
function formatCSS(el, properties) {
  for (var property in properties) {
    var current;
    var target = properties[property];

    if (property === "opacity") {
      current = Math.round(parseFloat(getStyle(el, "opacity")) * 100);
    } else {
      current = parseInt(getStyle(el, property));
    }

    var speed = (target - current) / 20;
    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

    if (property === "opacity") {
      el.style.opacity = (current + speed) / 100;
    } else {
      el.style[property] = current + speed + "px";
    }
  }
}
//减速函数
function animate(el, properties) { //el-->元素 properties-->[property属性,targe目标值（到那个位置停下）]
  clearInterval(el.timerId); //清除前一个定时器,防止定时器太多,速度越来越快
  el.timerId = setInterval(function () {
    formatCSS(el, properties)
    if (el.style.left === '0px') {
      el.style.left = (600 - el.offsetWidth) + "px";
      //el.style.opacity = 1
      animate(el, {
        "left": 0,
        //"opacity": 0
      })
    }
  }, 60);
}

//分别获取对应的元素节点
var oP = document.querySelector("p");
var oInput = document.querySelector("input");
var oBtn1 = document.querySelectorAll("button")[0];
var oBtn2 = document.querySelectorAll("button")[1];
var oBtn3 = document.querySelectorAll("button")[2];

//发送消息的函数
function sendMesage() {
  //构建span元素
  var span1 = document.createElement("span");
  span1.appendChild(document.createTextNode(oInput.value));
  oP.appendChild(span1);

  span1.style.position = "absolute";
  span1.style.cursor = "pointer";
  span1.style.top = Math.floor(Math.random() * 400) + "px"; //随机Top值
  // span1.style.color = '#' + getColor();
  span1.style.color = getColor1();
  var spanWidth = span1.offsetWidth;
  span1.style.left = (600 - spanWidth) + "px";

  animate(span1, {
    "left": 0,
    //"opacity": 0
  });
  oInput.value = ''
}
// 获得随机色
function getColor() {
  var chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'];

  function generateMixed(n) {
    var res = "";
    for (var i = 0; i < n; i++) {
      var id = Math.ceil(Math.random() * 16);
      res += chars[id];
    }
    return res;
  }
  return generateMixed(6);
}
// 获得随机色,指定范围内
function getColor1() {
  let color = ['red', 'white', 'pink', 'green', 'orange'];

  function random() {
    let i = Math.floor(Math.random() * (color.length - 1));
    let text = color.splice(i, 1)[0];
    return text;
  }
  return random();
}
//为发送按钮添加事件函数（按钮发送）
oBtn1.onclick = function () {
  if (oInput.value === '') {
    alert('请输入弹幕内容!')
  } else {
    sendMesage();
  }
}

//(键盘发送---回车键）
document.onkeydown = function (e) {
  var evt = e || window.event
  if (evt.keyCode == 13) {
    if (oInput.value === '') {
      alert('请输入弹幕内容!')
    } else {
      sendMesage();
    }
  }
}

//隐藏按钮添加事件函数
oBtn2.onclick = function () {
  oP.style.display = "none";
}

//显示按钮添加事件函数
oBtn3.onclick = function () {
  oP.style.display = "block";
}